/*
 * HeaderMenu.fx
 *
 * Created on 12-May-2010, 19:08:52
 */

package com.googlecode.snorkel;

import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.util.Math;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.Cursor;
import javafx.scene.image.Image;
import javafx.scene.effect.Reflection;
import javafx.scene.effect.DropShadow;
import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;

/**
 * @author brian
 */

public class HeaderMenu extends CustomNode {
   // Set the initial opacity level
   var opacityState = 0.0;

   // Create the imageViews
   var headerImages : ImageView[];
   function populateHeaderImages(){
      insert ImageView {
         id: "SNorkel"
         translateX: 0 //82 * i
         image: Image {
            url: "{__DIR__}images/SNorkel_icon_1.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on SNorkel icon!");
            Main.contentMain.setSocialNetwork('SNorkel');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "Bebo"
         translateX: 82 //82 * i
         image: Image {
            url: "{__DIR__}images/bebo_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on Bebo icon!");
            Main.contentMain.setSocialNetwork('Bebo');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "Twitter"
         translateX: 164 //82 * i
         image: Image {
            url: "{__DIR__}images/twitter_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on Twitter icon!");
            Main.contentMain.setSocialNetwork('Twitter');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "Facebook"
         translateX: 246 //82 * i
         image: Image {
            url: "{__DIR__}images/facebook_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on Facebook icon!");
            Main.contentMain.setSocialNetwork('Facebook');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "MySpace"
         translateX: 328 //82 * i
         image: Image {
            url: "{__DIR__}images/myspace_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on MySpace icon!");
            Main.contentMain.setSocialNetwork('MySpace');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "YouTube"
         translateX: 410 //82 * i
         image: Image {
            url: "{__DIR__}images/youtube_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on YouTube icon!");
            Main.contentMain.setSocialNetwork('YouTube');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "Flickr"
         translateX: 492 //82 * i
         image: Image {
            url: "{__DIR__}images/flickr_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on Flickr icon!");
            Main.contentMain.setSocialNetwork('Flickr');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "Picasa"
         translateX: 574 //82 * i
         image: Image {
            url: "{__DIR__}images/picasa_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on Picasa icon!");
            Main.contentMain.setSocialNetwork('Picasa');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "LinkedIn"
         translateX: 656 //82 * i
         image: Image {
            url: "{__DIR__}images/linkedin_icon.jpg"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on LinkedIn icon!");
            Main.contentMain.setSocialNetwork('LinkedIn');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
      insert ImageView {
         id: "Settings"
         translateX: 738 //82 * i
         image: Image {
            url: "{__DIR__}images/settings_icon.png"
         }
         smooth: true
         fitWidth: 50.0
         fitHeight: 50.0
         cache: true
         effect: Reflection {
            fraction: 0.3
            topOffset: 0.0
            topOpacity: 0.5
            bottomOpacity: 0.0
            input: DropShadow {
               offsetX: 5
               offsetY: -5
               color: Color.BLACK
               radius: 10
            }
         }
         scaleX: 0.666
         scaleY: 0.666
         onMouseClicked: function( e: MouseEvent ):Void {
            //println("Clicked on Settings icon!");
            Main.contentMain.setSocialNetwork('Settings');
         }
         onMouseMoved: function(e) {
            e.node.toFront();
         }
      }into headerImages;
   };

   // Set our cool zooming stuff
   def maxScale = 1.5;
   def multiplier = 80.0;

   var headerArea = Rectangle {
         width: 800
         height: 50
         onMouseMoved: function(e : MouseEvent) : Void {for(hi in headerImages) {
            var imageScale = maxScale - Math.min(maxScale - 1, Math.abs(e.x - (hi.translateX + 70 / 2)) / multiplier);
            hi.scaleX = imageScale/1.5;
            hi.scaleY = imageScale/1.5;
         }}
         onMouseExited: function(e : MouseEvent) : Void {for(hi in headerImages) {
            hi.scaleX = 0.666;
            hi.scaleY = 0.666;
         }}
         fill: Color.TRANSPARENT
         cursor: Cursor.HAND
      }

   // Add the fading and public functions
   var fadeIn = Timeline {
      keyFrames : [
         KeyFrame {
            time: 2s
            values: [opacityState => 1.0 tween Interpolator.LINEAR]
         }
      ]
   }
   var fadeOut = Timeline {
      keyFrames : [
         KeyFrame {
            time: 2s
            values: [opacityState => 0.0 tween Interpolator.LINEAR]
         }
      ]
   }
   package function fadeInHeader(){fadeIn.playFromStart();}
   package function fadeOutHeader(){fadeOut.playFromStart();}

   // Show our Node
   override public function create(): Node {
      populateHeaderImages();
      Group {
         content: [headerArea, headerImages]
         opacity: bind opacityState
      };
   }
}